<template>
  <div class="bench-canlendar-page">
    <px-button style="margin-bottom: -8px" icon="ArrowLeft" type="primary" @click="backMainPage">返回 </px-button>
    <px-calendar ref="calendar" v-model="currentDate" class="bench-calendar">
      <template #header="{ date }">
        <div class="bench-canlendar-title">
          <h3 class="date">{{ date }}</h3>
          <div class="icon-group">
            <px-button class="mr-[16px]" type="primary" @click="AddCanlendar()">新增日程</px-button>
            <px-button-group>
              <px-button type="small" @click="selectDate('prev-month')">上个月</px-button>
              <px-button type="small" @click="selectDate('today')">今天</px-button>
              <px-button type="small" @click="selectDate('next-month')">下个月</px-button>
            </px-button-group>
          </div>
        </div>
      </template>
      <template #date-cell="{ data }">
        <px-tooltip :content="`点击空白区域，新增${data.day}日程`" placement="top">
          <div class="bench-canlendar-day" @click="AddCanlendar(data.day)">
            <p class="bench-canlendar-cell">
              {{ data.day.split("-").slice(2).join() }}
            </p>
            <px-icon class="add-icon"><Plus /></px-icon>
            <px-scrollbar max-height="300px">
              <ul v-if="calendarData[data.day]" class="task-list">
                <li
                  v-for="item in calendarData[data.day]?.slice(0, 4)"
                  :key="`${item.taskId}${item.id}${item.taskResourceId}`"
                  :class="['task-item', item.taskStatus === 'DONE' ? 'done' : ''].join(' ')"
                >
                  <px-text class="mx-1 text" truncated @click.stop="handleClick(item, data.day)">{{ item.taskTitle }}</px-text>
                </li>
                <li v-if="calendarData[data.day]?.length > 4" class="task-item-info" @click.stop="() => {}">
                  <px-popover :width="250" trigger="click" placement="right-start">
                    <template #reference>
                      <div>
                        <px-text class="mx-1" truncated
                          >还有<span class="task-num">{{ calendarData[data.day]?.length - 4 }}</span
                          >个日程</px-text
                        >
                      </div>
                    </template>
                    <div class="popover">
                      <div class="day">{{ data.day.split("-").slice(2).join() }}</div>
                      <ul class="task-popover-list">
                        <li
                          v-for="item in calendarData[data.day]"
                          :key="`${item.taskId}${item.id}${item.taskResourceId}`"
                          :class="['task-popover-item', item.taskStatus === 'DONE' ? 'done' : ''].join(' ')"
                          @click="handleClick(item, data.day)"
                        >
                          <px-tooltip effect="dark" :content="item.taskTitle" placement="top">
                            <px-text class="mx-1" truncated>{{ item.taskTitle }}</px-text>
                          </px-tooltip>
                        </li>
                      </ul>
                    </div>
                  </px-popover>
                </li>
              </ul>
            </px-scrollbar>
          </div>
        </px-tooltip>
      </template>
    </px-calendar>
    <!-- 新增日程 -->
    <AddSchedule v-model:dialogVisible="addScheduleVisible" :day="targetDay" @refresh="getMycalendar" />
    <!-- 手动添加日程的详情 -->
    <ScheduleDetail v-model:dialogVisible="scheduleDetailVisible" :editAble="true" :data="scheduleDetailData" @refresh="getMycalendar" />
  </div>
</template>
<script lang="ts" setup>
import { MyCalendar } from "@/api/bench";
import type { CalendarDateType, CalendarInstance } from "px-ui";
import { PxMessage } from "px-ui";
import { ref, watchEffect } from "vue";
import { useRouter } from "vue-router";
import AddSchedule from "./components/AddSchedule/index.vue";
import ScheduleDetail from "./components/ScheduleDetail/index.vue";

const calendar = ref<InstanceType<typeof CalendarInstance>>();
const currentDate = ref();
const calendarData = ref({});
const router = useRouter();
const currentMonth = ref();

const selectDate = (val: InstanceType<typeof CalendarDateType>) => {
  if (!calendar.value) return;
  calendar.value.selectDate(val);
};
const backMainPage = () => {
  router.push("/all/bench/home");
};
// 获取我的日程
const getMycalendar = async (update = false) => {
  const oDate = currentDate.value ? new Date(currentDate.value) : new Date();
  const oYear = oDate.getFullYear();
  const oMonth = oDate.getMonth() + 1;
  if (currentMonth.value === oMonth && !update) {
    return;
  }
  currentMonth.value = oMonth;
  calendarData.value = {};
  const data: any = await MyCalendar({ year: oYear, month: oMonth });
  data.forEach(item => {
    calendarData.value[item.date] = item.taskList;
  });
};
// 是否有待处理任务
const hasTask = data => {
  if (data) {
    const flag = !!data.find(item => {
      return item.taskStatus === "UNDO";
    });
    return flag;
  }
};
const scheduleDetailVisible = ref(false);
const scheduleDetailData = ref();
// 跳转详情
const handleClick = (data, day) => {
  if (data.taskResource === "我的日程") {
    // 1、手动添加日程
    scheduleDetailVisible.value = true;
    scheduleDetailData.value = data;
  } else {
    // 2、任务流转日程
    if (data?.taskResourceUrl) {
      if (/^http/.test(data.taskResourceUrl)) {
        window.open(data.taskResourceUrl);
      } else {
        router.push(data.taskResourceUrl);
      }
    } else {
      PxMessage.error("请配置正确的跳转地址");
    }
  }
  currentDate.value = new Date(day);
};
const addScheduleVisible = ref(false);
const targetDay = ref();
// 新增待办日程
const AddCanlendar = (day?: string) => {
  if (day) {
    currentDate.value = new Date(day);
  }
  targetDay.value = day;
  addScheduleVisible.value = true;
};
watchEffect(() => {
  getMycalendar();
});
</script>
<style lang="scss" scoped>
.bench-canlendar-page {
  padding: 20px;
  overflow: hidden;
  background-color: #fff;
}

.bench-calendar {
  .bench-canlendar-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .date {
    font-weight: bold;
  }

  .icon-group {
    position: absolute;
    top: 50%;
    right: 0;
    display: flex;
    align-items: center;
    margin-left: 25px;
    transform: translateY(-50%);
  }

  :deep(.px-icon) {
    cursor: pointer;
  }

  :deep(.px-calendar__body) {
    padding: 0;

    .px-calendar-table th {
      padding: 6px 0;
      background-color: #e7eefb;

      &:not(:last-child) {
        border-right: 1px solid #ebecec;
      }
    }

    .px-calendar-table td.is-selected .px-calendar-day:hover {
      cursor: pointer;
      background-color: #f5f5f5;
    }

    .px-calendar-table td {
      border-color: #ebecec;

      &.is-selected {
        color: #000;
        background-color: transparent;
        box-shadow: none;

        .bench-canlendar-cell {
          // background: #fff;
          border: none;
        }
      }

      &.is-today {
        color: #fff;

        .bench-canlendar-cell {
          background: #267ef0;
        }
      }
    }

    .px-calendar-day {
      height: 140px;
      padding: 0;
    }

    .bench-canlendar-day {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 6px;
      overflow: hidden;
      font-weight: bold;

      &:hover {
        .add-icon {
          display: block;
        }
      }

      .add-icon {
        position: absolute;
        top: 12px;
        right: 6px;
        display: none;
      }
    }

    .task-list {
      margin-top: 6px;

      .px-text {
        font-size: 12px;
        line-height: 12px;
        color: #000;
      }

      .task-item {
        position: relative;
        padding-left: 4px;
        line-height: 12px;
        cursor: pointer;

        &::before {
          position: absolute;
          top: 50%;
          left: 0;
          display: block;
          width: 6px;
          height: 6px;
          content: "";
          background: #3b82f6;
          border-radius: 50%;
          transform: translateY(-50%);
        }

        &:not(:first-child) {
          margin-top: 6px;
        }

        &.done {
          .px-text {
            line-height: 1;
            color: #88898d;
          }

          &::before {
            background: #d3e4ff;
          }
        }
      }
    }

    .task-item-info {
      margin-top: 6px;
      line-height: 12px;

      .px-text {
        font-size: 12px;
        line-height: 1;
        color: #303438;
      }
    }

    .task-num {
      color: #267ef0;
    }
  }

  .bench-canlendar-cell {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
  }
}

.popover {
  .day {
    height: 18px;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    color: #000;
  }

  .task-popover-list-container {
    max-height: 400px;
    overflow-x: hidden;
  }

  .task-popover-list {
    margin-top: 8px;
  }

  .task-popover-item {
    position: relative;
    padding-left: 12px;
    margin-bottom: 8px;
    font-weight: 400;
    line-height: 16px;
    cursor: pointer;

    :deep(.px-text) {
      font-size: 14px;
      line-height: 16px;
      color: #303438;
    }

    &::before {
      position: absolute;
      top: 50%;
      left: 0;
      display: block;
      width: 4px;
      height: 4px;
      content: "";
      background: #267ef0;
      border-radius: 50%;
      transform: translateY(-50%);
    }

    &.done {
      :deep(.px-text) {
        font-size: 14px;
        line-height: 16px;
        color: #88898d;
      }

      &::before {
        background: #d3e4ff;
      }
    }
  }
}
</style>
